<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片层叠展开</title>
    <link rel="stylesheet" type="text/css" href="8/styles.css">
</head>

<body>
    <ul class="cards">
        <li class="title">
            <h2>Slide right</h2>
        </li>
        <li class="card card-1"><img src="8/01.jpg">
            <div class="content">
                <h1>Card 1 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-2"><img src="8/02.jpg">
            <div class="content">
                <h1>Card 2 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-3"><img src="8/03.jpg">
            <div class="content">
                <h1>Card 3 Title</h1>
                <p>Card description</p>
            </div>
        </li>
    </ul>
    <hr />
    <ul class="card-stacks">
        <li class="title">
            <h2>Expand to grid</h2>
        </li>
        <li class="stack stack-1">
            <ul class="cards-down">
                <li class="card card-1"><img src="8/04.jpg">
                    <div class="content">
                        <h1>Card 1 Title</h1>
                        <p>Stack 1</p>
                    </div>
                </li>
                <li class="card card-2"><img src="8/05.jpg">
                    <div class="content">
                        <h1>Card 2 Title</h1>
                        <p>Stack 1</p>
                    </div>
                </li>
                <li class="card card-3"><img src="8/06.jpg">
                    <div class="content">
                        <h1>Card 3 Title</h1>
                        <p>Stack 1</p>
                    </div>
                </li>
            </ul>
        </li>
        <li class="stack stack-2">
            <ul class="cards-down">
                <li class="card card-1"><img src="8/07.jpg">
                    <div class="content">
                        <h1>Card 1 Title</h1>
                        <p>Stack 2</p>
                    </div>
                </li>
                <li class="card card-2"><img src="8/08.jpg">
                    <div class="content">
                        <h1>Card 2 Title</h1>
                        <p>Stack 2</p>
                    </div>
                </li>
                <li class="card card-3"><img src="8/01.jpg">
                    <div class="content">
                        <h1>Card 3 Title</h1>
                        <p>Stack 2</p>
                    </div>
                </li>
            </ul>
        </li>
        <li class="stack stack-3">
            <ul class="cards-down">
                <li class="card card-1"><img src="8/06.jpg">
                    <div class="content">
                        <h1>Card 1 Title</h1>
                        <p>Stack 3</p>
                    </div>
                </li>
                <li class="card card-2"><img src="8/02.jpg">
                    <div class="content">
                        <h1>Card 2 Title</h1>
                        <p>Stack 3</p>
                    </div>
                </li>
                <li class="card card-3"><img src="8/03.jpg">
                    <div class="content">
                        <h1>Card 3 Title</h1>
                        <p>Stack 3</p>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <hr />
    <ul class="cards-split">
        <li class="title">
            <h2>Split from middle</h2>
        </li>
        <li class="card card-1"><img src="8/02.jpg">
            <div class="content">
                <h1>Card 1 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-2"><img src="8/04.jpg">
            <div class="content">
                <h1>Card 2 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-3"><img src="8/06.jpg">
            <div class="content">
                <h1>Card 3 Title</h1>
                <p>Card description</p>
            </div>
        </li>
    </ul>
    <hr />
    <ul class="cards-split-delay">
        <li class="title">
            <h2>Delayed split from middle</h2>
        </li>
        <li class="card card-1"><img src="8/01.jpg">
            <div class="content">
                <h1>Card 1 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-2"><img src="8/05.jpg">
            <div class="content">
                <h1>Card 2 Title</h1>
                <p>Card description</p>
            </div>
        </li>
        <li class="card card-3"><img src="8/08.jpg">
            <div class="content">
                <h1>Card 3 Title</h1>
                <p>Card description</p>
            </div>
        </li>
    </ul>
    <script type="text/javascript" src='8/jquery-1.10.2.min.js'></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('ul.cards').on('click', function () {
                $(this).toggleClass('transition');
            });
            $('ul.card-stacks').on('click', function () {
                $(this).toggleClass('transition');
            });
            $('ul.cards-split').on('click', function () {
                $(this).toggleClass('transition');
            });
            $('ul.cards-split-delay').on('click', function () {
                $(this).toggleClass('transition');
            });
        });
    </script>
</body>

</html>